<template>
	<div class="content">
		<div class="hexagon">
			<img @click="isShowHeadop = !isShowHeadop" src="../../static/images/hexagon.png" alt="" style="cursor: pointer;" />
		</div>
		<headop
			v-show="isShowHeadop"
			class="z-headop"
			:agent-status="agentStatus"
			:sessionId="sessionId"
			:audioMuted="audioMuted"
			:appointValue="appointValue"
			@checkIn="checkIn"
			@checkOut="checkOut"
			@upgradeToVideo="upgradeToVideo"
			@loginAms="loginAms"
			@otherWork="otherWork"
			@appoint="appoint"
			@audioControl="audioControl"
			@logoutAms="logoutAms"
			@ready="ready"
			@unready="unready"
			@addwater="addwater"
			@addbackgroup="addbackgroup"
			:isCalling="isCalling"
		></headop>
		<div class="head" v-show="false">
			客户文件信息
		</div>
		<div class="file1" v-show="false">
			<div style="width: 100%;height: 100px">
				<canvas id="canvas" width="360" height="600"></canvas>
			</div>
		</div>
		<div class="head" v-show="false">
			<!--<span>客户表单</span>-->
			<Button type="info" @click="getformdata()" style="background:rgba(58,152,255,1);width: 120px;">获取表单内容</Button>
			<!--<div v-if="formdata">-->

			<!--<Modal-->
			<!--v-model="formdata.ID"-->
			<!--title="客户提交表单"-->
			<!--content=""-->
			<!--ok-text="确定"-->
			<!--cancel-text = "关闭"-->
			<!--&gt;-->
			<!--<div v-show="formdata.name" class="form">客户名:{{formdata.name}}</div>-->
			<!--<div v-show="formdata.ID" class="form">身份证:{{formdata.ID}}</div>-->
			<!--<div v-show="formdata.age" class="form">年龄:{{formdata.age}}</div>-->
			<!--<div v-show="formdata.mobile" class="form">手机号:{{formdata.mobile}}</div>-->
			<!--<div v-show="formdata.address" class="form">住址:{{formdata.address}}</div>-->
			<!--</Modal>-->

			<!--</div>-->
		</div>

		<div class="head" v-show="false">
			<span>通话记录</span>
			<Button type="info" @click="updatedata()">更新</Button>
		</div>
		<div class="file" v-show="false">
			<div style="width: 100%;" class="item" v-for="(item, index) in recorddata" v-bind:key="index">
				<span>{{ getMyDate(item.createTime) }} </span>
				<span>{{ item.msgFrom == 1 ? '客户' : '坐席' }}回复:</span>
				<span v-if="item.msgType == 'text'">{{ item.text.content }}</span>
				<img :src="fileurl + item.image.mediaId" v-if="item.msgType == 'image'" class="image" />
				<Button type="info" v-if="item.msgType == 'file'" @click="gofile(item.file.mediaId)">{{ item.file.title }}</Button>
			</div>
			<!--<a :href="fileurl+'10001/201908/10/9ef940c3b4994d19ae1ada9efc91ae7d.pdf'">pdf文件</a>-->
			<!--<Button @click="gotofile()">pdf</Button>-->
		</div>
		<div class="head">
			{{ $t('ivcs.chatframe') }}
		</div>
		<div style="width: 100%;height: 500px;z-index: 2">
			<i-m @sendtxt="sendtxt" :chatList.sync="chatList" :sessionId="sessionId" ref="im" :agentId="agentId"></i-m>
		</div>
	</div>
</template>

<script>
import Headop from './Headop';
import IM from './IM';
export default {
	name: 'Right',
	components: { IM, Headop },
	props: ['recorddata', 'fileurl', 'chatList', 'captureImage', 'formdata', 'agentStatus', 'appointValue', 'sessionId', 'audioMuted', 'isCalling', 'agentId'],
	data() {
		return {
			isShowHeadop: false
		};
	},
	mounted() {},
	created() {},
	methods: {
		linkccim(url) {
			this.$refs.im.initCCC(url);
		},

		sendmessage(value) {
			this.$refs.im.sendMessage(true, value);
		},

		createroomandinvite() {
			//this.$parent.createroomandinvite();
			this.$emit('createroomandinvite');
		},

		/*发送消息*/
		sendtxt(value) {
			console.log(value);
			this.$emit('sendtxt', value);
		},

		/*发送文件*/
		sendfile() {
			// this.$emit('sendfile',value);
		},
		updatedata() {
			this.$emit('getrecord');
		},

		/*获取客户提交的表单信息*/
		getformdata() {
			this.$emit('getformdata');
		},

		gotofile() {
			let url = this.fileurl + '10001/201908/10/9ef940c3b4994d19ae1ada9efc91ae7d.pdf';
			window.open(url, '_blank'); //'toolbar=yes, width=900, height=700'
		},

		gofile(mediaId) {
			let url = this.fileurl + mediaId;
			window.open(url, '_blank'); //'toolbar=yes, width=900, height=700'
		},

		getMyDate(str) {
			var oDate = new Date(str * 1000),
				oYear = oDate.getFullYear(),
				oMonth = oDate.getMonth() + 1,
				oDay = oDate.getDate(),
				oHour = oDate.getHours(),
				oMin = oDate.getMinutes(),
				oSen = oDate.getSeconds(),
				oTime = oYear + '-' + this.addZero(oMonth) + '-' + this.addZero(oDay) + ' ' + this.addZero(oHour) + ':' + this.addZero(oMin) + ':' + this.addZero(oSen);
			return oTime;
		},

		//补零操作
		addZero(num) {
			if (parseInt(num) < 10) {
				num = '0' + num;
			}
			return num;
		},
		checkIn() {
			this.$emit('checkIn');
		},
		checkOut() {
			this.$emit('checkOut');
		},
		loginAms() {
			this.$emit('loginAms');
		},
		exitSystem() {
			this.$emit('exitSystem');
		},
		logoutAms() {
			this.$emit('logoutAms');
		},
		ready() {
			this.$emit('ready');
		},
		unready() {
			this.$emit('unready');
		},
		appoint() {
			this.$emit('appoint');
		},
		otherWork() {
			this.$emit('otherWork');
		},
		audioControl() {
			this.$emit('audioControl');
		},
		addwater() {
			this.$emit('addwater');
		},
		addbackgroup() {
			this.$emit('addbackgroup');
		},
		upgradeToVideo() {
			this.$emit('upgradeToVideo');
		}
	}
};
</script>

<style scoped>
.hexagon {
	width: 100%;
	text-align: right;
	margin-right: 31px;
	margin-top: 29px;
}
.z-headop {
	position: absolute;
	z-index: 999;
	top: 67px;
	right: 12px;
}
.content {
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
}

.head {
	background: #ffffff;
	color: rgba(51, 51, 51, 1);
	font-size: 15px;
	width: 100%;
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #dedede;
}

.file {
	overflow: auto;
	height: 100px;
	width: 100%;
}

.canvas {
	width: 800px;
	height: 600px;
}

.file1 {
	overflow: auto;
	height: 200px;
	width: 100%;
}

.image {
	width: 40px;
	height: 40px;
}
.item {
	border: 1px solid royalblue;
}
</style>
